import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';
import Tocify from '../../components/tocify.tsx';
import { Anchor } from 'antd';

export default function mdToHtml(markdown) {

    // 文章目录
    const tocify = new Tocify();

    // 文章内容
    const renderer = new marked.Renderer();

    renderer.heading = function(text,level,raw) {
        const anchor = tocify.add(text,level);
        return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
    }
    // maked 配置
    marked.setOptions({
        renderer: renderer, 
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
                return hljs.highlightAuto(code).value;
        }
    });

    let html = marked(markdown);

    return {
        catalogue:(tocify && tocify.render()),
        html:html
    }
} 